/**
 * 将所有需要生成标签页的a标签添加一个类名new_iframe
 * @params: w => 最顶部的widow对象
 */

(function (w) {
		var w = window.top;
	// 用于存放iframe, tab, src 的数组， {iframe: DOM, tab: DOM, src: URL, show: Bollean}
	w.domArray = w.domArray || []; 

	var link_btns = document.querySelectorAll('.new_iframe'), // 获取当前window生成标签页的a标签
		title, //用于存放link_btns的内容
		link; // 用于存放link_btns的链接 

	var iframes = w.document.getElementById('iframes'), // 追加iframe的element
		tab_ul = w.document.getElementById('tab_ul'), // 住家tab的element
		tab_length = 138;

	if (tab_ul) tab_ul.style.width = '100%';

	if ($) { // 有些标签是用js生成的
		$(document).on('click', '.new_iframe', function (e) {
			 	bindLinkEvent.call(this, e);
		});
		
	} else {
		link_btns.forEach(function (val, n) {
			addEvent(val, 'click', function (e) {	
			 	bindLinkEvent.call(this, e);
			});
		});
	}

	/**
	 * 为.new_iframe绑定事件，判断window.top有没存放生成iframe的section（id为iframes） 标签
	 *  有的话生成iframe和 tab标签， 没有的话打开新的浏览器页面
	 */ 
	function bindLinkEvent (e) {
		e.preventDefault();
		var _this = this;

		if (iframes) {
			getLink(_this);
		 	if (getSingle()) return;
		 	Init();
		} else {

			window.open(_this.href);
		}
		

	}

	

	/**
	 * 点击link_btns标签获取href
	 *
	 */
	 function getLink (_this) {
	 	link = _this.href;
	 	title = $(_this).data('title') || _this.innerText;

	 }


	/**
	 * getSingle 判断需要生成的iframe和tab是否已经存在
	 * @return： false=> 不存在，需要生成。 true=> 存在
	 */
	function getSingle () {
		var status = false;
		if (w.domArray.length <= 0) {
			w.domArray.push({
				show: true,
				iframe: newIframe(),
				tab: newTab(),
				src: link
			});
			return false;
		}

		hideNewDom();
		w.domArray.forEach(function (val, n) {

			var contWin = val.iframe.contentWindow;

			if (link == val.src || link == contWin.location.href) {
				showNewDom(val, true, link);
				// contWin.location.href = link;
				status = true;

			}

			// srcCompare(val, n);

			// if (val.src == link) {
			// 	showNewDom(val, true); // 再次点击已存在iframe的链接,会刷新该页面
			// 	status = true;
			// 	// return true  此处return 不会终止循环
			// } 
			if (n == w.domArray.length -1 && !status) {
				w.domArray.push({
					show: true,
					iframe: newIframe(),
					tab: newTab(),
					src: link
				});
				
			}
		}); 
		return status;
	}

	/**
	 * 添加成功之后， 后台跳转至列表页面， 再次点击列表页的添加按钮
	 * @params: item=> domArray[n]
	 */
	function srcCompare (item, n) {
		var contWin = item.iframe.contentWindow;

		if (item.src !== contWin.location.href) {
			item.src = contWin.location.href;
			item.tab.getElementsByTagName('a')[0].innerText = contWin.document.title;
			arrUnique(item.src, n);
		}

	}


	/**
	 * 重复添加成功之后， 后台跳转至列表页面， 再次点击列表页的添加按钮， 会生出具有相同的src的iframe，
	 * 移除重复的iframe
	 * @params: item=> domArray[n]
	 */
	function arrUnique (src, n) {

		for (var i = 0; i < w.domArray.length; i++) {
			if (w.domArray[i].src === src && i != n) {

				removeDom(w.domArray[i]);
				break;
				// return w.domArray.splice(i, 1);
			}
		}
	}

	/**
	 * 创建一个新的iframe, 指定target = link;
	 * @return iframe Dom
	 */
	function newIframe () {
		var iframe = w.document.createElement('iframe');
		iframe.width = '100%';
		iframe.height = '100%';
		iframe.scrolling = 'auto';
		iframe.frameborder = '0';

		iframe.onload = function () {
			iframe.className = 'show';
		}
		return iframe;
	}


	/**
	 * 创建一个新的tab标签，
	 * @return div Dom
	 */
	 // <li class="active"><a href="" target="iframe1" title="报修单列表">报修单列表</a><span>×</span></li>
	function newTab () {
		var tab = w.document.createElement('li');
		var span = w.document.createElement('span');
		var a = w.document.createElement('a');
		span.innerText = '×';
		tab.className = 'active';
		a.innerText = title;
		tab.appendChild(a);
		tab.appendChild(span);
		return tab;
	}


	/**
	 * 隐藏所有的iframe
	 *	所有tab标签页移除active
	 */
	function hideNewDom () {
		w.domArray.forEach(function (val, n) {
			if (val.show == true) {
				val.tab.className = "";
				val.iframe.className = '';
				val.show = false;
			}
		});
	}


	/**
	 * 显示w.domArray[n].iframe
	 *	w.domArray[n].tab标签页添加active
	 * @params: item => domArr的的某一项， reload=> true则表示刷新该页面， false=> 刷新, url=> 跳转的地址
	 */
	function showNewDom (item, reload, url) {

		item.tab.className = item.tab.className + ' ' + 'active';
		item.iframe.className = item.iframe.className + ' ' + 'show';
		item.show = true;

		if(reload) {
			if (url) {
				item.iframe.contentWindow.location.href = url;
			} else {
				item.iframe.contentWindow.location.reload();
			}
		}
	}


	/**
	 * 删除w.domArray[n].iframe， w.domArray[n].tab
	 * w.document.body移除iframe、 tab
	 */
	function removeDom (item) {
		iframes.removeChild(item.iframe);
		tab_ul.removeChild(item.tab);
		var n = indexOf(item);
		w.domArray.splice(n, 1);

		if (item.show) {
			if (w.domArray.length > 0) {
				if (n == 0) n++;
				if (n > 0) n--; 
				showNewDom(w.domArray[n], false);
			}
		}
	}


	/**
	 * tab 标签绑定点击事件
	 * <span>×</span> 绑定删除事件
	 * <a></a> 绑定切换iframe事件
	 */
	function bindEvent (item) {
		var a = item.tab.getElementsByTagName('a')[0];
		addEvent(a, 'click', function () {
			hideNewDom();
			showNewDom(item, false);
		});

		var span = item.tab.getElementsByTagName('span')[0];
		addEvent(span, 'click', function () {
			removeDom(item);
		})

	}


	/**
	 * 绑定事件
	 * 
	 */
	function addEvent (elem, event, fn) {
		if (elem.addEventListenter) {
			elem.addEventListenter(event, fn, true);
		} else if (elem.attachEvent) {
			elem.attachEvent(event, fn);
		} else {
			elem['on' + event] = fn;
		}
	}

	/**
	 * 初始化生成dom，调用bindEnvent绑定事件
	 */
	 function Init () {
	 	var item = w.domArray[w.domArray.length-1],
	 		width = tab_ul.clientWidth,
 			n = Math.floor(width / tab_length);

 		if (n <= 0) return;

 		item.iframe.src = item.src;
 		iframes.appendChild(item.iframe);
 		tab_ul.appendChild(item.tab);
 		bindEvent(item);

 		if (w.domArray.length > n) {
 			removeDom(w.domArray[0]);
 			showNewDom(w.domArray[w.domArray.length-1], false);
 		}


	 }

	/**
	 * @params: item=> w.domArray的某项
	 * 获取item 在w.domArray的下标
	 */
	 function indexOf (item) {
	 	for (var i = 0; i < w.domArray.length; i++) {

	 		if (item === w.domArray[i]) {
	 			return i;
	 		}
	 	}
	 }

	 /**
	  * 获取计算后的的样式
	  */
	 // function getComputedStyle (element) {
	 // 	if (document.defaultView.getComputedStyle) {
	 // 		return document.defaultView.getComputedStyle(element, null);
	 // 	} else {
	 // 		return element.currentStyle;
	 // 	}

	 // }

})(window.top)